<template>
	<div class="skt">
			<div class="skt-top">
					<h2>本周热门榜单
						<i class="iconfont">&#xe628;</i>
						</h2>
						<label>
							全部榜单
							<i class="iconfont">&#xe654;</i>
						</label>
						</div>
					<div class="swiper skt-swiper">
						<ul class="swiper-wrapper">
							<li class="swiper-slide" v-for="item in sktList" :key="item.id">
						    <router-link to="/">
							<img :src="item.imgURL" />
							<p>{{item.title}}</p>
							<label><strong>￥{{item.price}}</strong>起</label>
							</router-link>
							</li>
						</ul>
					</div>
	</div>
		
</template>

<script>
	import {onMounted} from 'vue';
	// 2引入swiper的动态组件
	import Swiper ,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	} from 'swiper';
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	export default{
		name: 'Skt',
		data(){
			return{
				sktList:[
					{id:1,imgURL:require('@/assets/img/hot01.jpg'),title:'长隆野生动物园',price:250},
					{id:2,imgURL:require('@/assets/img/hot02.jpg'),title:'长隆欢乐世界',price:210.9},
					{id:3,imgURL:require('@/assets/img/hot03.jpg'),title:'广州塔',price:19},
					{id:4,imgURL:require('@/assets/img/hot04.jpg'),title:'海珠国家湿地公园',price:297.6},
					{id:5,imgURL:require('@/assets/img/hot05.jpg'),title:'长隆国际大马会',price:251},
					{id:6,imgURL:require('@/assets/img/hot06.jpg'),title:'珠江夜游',price:50},
					{id:7,imgURL:require('@/assets/img/hot07.jpg'),title:'天道樱花乐园',price:360},
					{id:8,imgURL:require('@/assets/img/hot08.jpg'),title:'广州长隆旅游',price:520},
					{id:9,imgURL:require('@/assets/img/hot09.jpg'),title:'广州融创雪世界',price:310},
					{id:10,imgURL:require('@/assets/img/hot11.jpg'),title:'广州正佳极地世界',price:299},
					
				]
			}
		},
		setup(){
			onMounted( ()=>{ 
				new Swiper('.skt-swiper' ,{
					loop :true,
					slidesPerView:4,
				})
			})
	}}
</script>

<style scoped>
	*{
		text-decoration: none;
	}
	.skt{
		border-bottom: 0.5rem solid gainsboro;
	}
	.skt-top{
		width: 100%;
		height: 1rem;
	}
	.skt-top h2{
		font-size: 0.4rem;
		font-weight: bold;
		line-height: 1rem;
		margin-left: 0.2rem;
		float: left;
	}
	.skt-top h2 i{
		font-size: 0.4rem;
		color: red;
	}
	.skt-top label{
		float: right;
		margin-right: 0.3rem;
		margin-top: 0.3rem;
		font-size: 0.3rem;
		color: gray;
	}
	.swiper{
		width: 100%;
	}
	.swiper li{
		width: 25%;
		text-align: center;
		margin-left: 0.3rem;
		margin-bottom: 0.2rem;
	}
	.swiper li img{
		width: 2.5rem;
		height: 3rem;
	}
	.swiper li p{
		color: black;
		font-size: 0.25rem;
		margin-top: 0.1rem;
		margin-bottom: 0.1rem;
	}
	.swiper li label{
		color: orange;
		font-size: 0.3rem;
		margin-top: 0.1rem;
		margin-bottom: 0.1rem;
		font-weight: bold;
	}
</style>
